import * as React from 'react'
import { Modal, Toast } from 'antd-mobile'
import { Button, NavBar, Item, Gird, Input } from 'components'
import './index.less'
import { post } from '../../utils'

export default class BeansOrder extends React.Component<any, any> {
    public state = {
        visible: false,
        info: {},
        value: '0',
        price: 0
    }

    public render(): JSX.Element {
        const { visible, value, price } = this.state
        const info: any = this.state.info
        return (
            <div className="beans_order">
                <NavBar
                    fixed={true}
                    title="填写订单"
                />
                <Gird style={{ padding: 0, margin: 0 }}>
                    <Item className="beans_order__item" title="转让人" value={info.user_name} />
                    <Item className="beans_order__item" title="转让折扣" value={info.discount ? `${Number(info.discount).toFixed(1)}折` : ''} />
                    <Item className="beans_order__item" title="剩余数量" value={<span>{info.buy_amount}<img src={require('../../assets/hd_img.png')} /></span>} />
                </Gird>
                <Gird style={{ padding: 0 }}>
                    <Item className="beans_order__info" title="购买数量" value={<span onClick={() => { this.setState({ visible: true }) }}>购买规则</span>} />
                    <Input
                        value={value}
                        type="number"
                        className="beans_order__number"
                        onFocus={this.handleFocus}
                        onChange={this.handleChange}
                        onClose={() => { this.setState({ value: '0' }) }}
                        onBlur={(e: any) => { const val = e.target.value; if (!val) { this.setState({ value: '0' }) } }}
                    />
                </Gird>
                <Button
                    className="footer_btn"
                    disabled={price === 0 ? true : false}
                    fixed={true}
                    onClick={this.handleMovePay}
                >
                    需支付：<span className="DINPro">¥ {price.toFixed(2)}</span>
                </Button>
                <Modal
                    visible={visible}
                    transparent={true}
                    maskClosable={false}
                    // onClose={this.onClose('modal1')}
                    title="恒豆购买规则"
                    footer={[{
                        text: '我知道了',
                        onPress: () => { this.setState({ visible: false }) },
                        style: {
                            height: '2.5rem',
                            fontSize: '0.8rem',
                            color: '#fa0000'
                        }
                    }]}
                >
                    <div className="beans_order_modal">
                        <div>
                            <div className="title">购买条件</div>
                            <div className="label">1.订单金额大于20元(含);</div>
                            <div className="label">2.恒豆数量大于1000个(含);</div>
                            <div className="label">3.恒豆支付不得超过每笔订单应付金额的50%;</div>
                        </div>
                        <div>
                            <div className="title">购买数量</div>
                            <div className="label">1.使用恒豆数量为10的整数倍;</div>
                            <div className="label">2.1000恒豆抵10元;</div>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
    }

    private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const info: any = this.state.info
        let value = Number(e.target.value)
        value = value < 0 ? 0 : value > Number(info.buy_amount) ? Number(info.buy_amount) : value
        this.setState({
            value,
            price: value * Number(info.discount) / 10
        })
    }

    private handleFocus = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value
        if (value === '0') {
            this.setState({
                value: '',
                price: 0
            })
        }
    }

    private getData() {
        const { match } = this.props
        Toast.loading('', 0)
        post('beanapi/beanInfo', {
            id: match.params.id
        }).then((info: any) => {
            setTimeout(() => { Toast.hide(); this.setState({ info }) }, 500)
        })
    }

    private handleMovePay = () => {
        const { SET_BEANS_ORDER, history, userInfo } = this.props
        const { price, value } = this.state
        const info: any = this.state.info
        if (info.user_name === userInfo.user_name) {
            Toast.info('不能购买自己发布的恒豆！')
            return
        }
        if (Number(value) % 10 !== 0) {
            Toast.info('恒豆数量应为10的倍数')
            return
        }
        const val = {
            id: info.id,
            price: price.toFixed(2),
            gmprice: value
        }
        SET_BEANS_ORDER(val)
        history.push('/selectPay/?id=5')
    }
}